<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="layout">
	<tiles:putAttribute name="head">
		<style type="text/css">
.singleLine {
	white-space: nowrap;
	width: 8em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	line-height: 20px;
}
</style>
		<script type="text/javascript">
			$(function() {
				var startDate;
				var endDate;

				var selectCurrentWeek = function() {
					window.setTimeout(function() {
						$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
					}, 1);
				};

				$('.week-picker').datepicker({
					showWeek : true,
					firstDay : 1,
					dateFormat : 'yy-mm-dd',
					showOtherMonths : true,
					selectOtherMonths : true,
					onSelect : function(dateText, inst) {
						var date = $(this).datepicker('getDate');
						// 从周一开始选择
						startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
						endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
						var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
						$('#startDate').val($.datepicker.formatDate(dateFormat, startDate, inst.settings));
						$('#endDate').val($.datepicker.formatDate(dateFormat, endDate, inst.settings));

						selectCurrentWeek();
					},
					beforeShowDay : function(date) {
						var cssClass = '';
						if (date >= startDate && date <= endDate)
							cssClass = 'ui-datepicker-current-day';
						return [ true, cssClass ];
					},
					onChangeMonthYear : function(year, month, inst) {
						selectCurrentWeek();
					},
					onClose : function() {
						$("form").submit();
					}
				});

				$('.ui-datepicker-calendar tr').live('mousemove', function() {
					$(this).find('td a').addClass('ui-state-hover');
				});
				$('.ui-datepicker-calendar tr').live('mouseleave', function() {
					$(this).find('td a').removeClass('ui-state-hover');
				});

				$(".dialog").frameDialog({
					width : 800,
					height : 500,
					close : function() {
						if (art.dialog.data("success")) {
							location.reload();
						}
					}
				});
			});
		</script>
	</tiles:putAttribute>
	<tiles:putAttribute name="mainBody">
		<form class="form-horizontal">
			<fieldset>
				<legend>教员~周取消课程条块表：${classroom.name}</legend>
				<div class="control-group">
					<label class="control-label">日期选择</label>
					<div class="controls">
						<input type="text" class="input-small week-picker" id="startDate" name="startDate" value='<s:date name="#startDate" format="yyyy-MM-dd"/>' /> ~ <input
							class="input-small week-picker" type="text" id="endDate" name="endDate" value='<s:date name="#endDate" format="yyyy-MM-dd"/>'> 第${week}周
					</div>
				</div>
			</fieldset>
		</form>
		<s:iterator value="#timePairs.keys" var="timePairName">
			<table class="table table-bordered">
				<caption>
					<s:url namespace="/lesson" action="listDailyLesson" id="listDailyLesson">
						<s:param name="startDate" value="getFormateDay(#timePairs[#timePairName].startDate)"></s:param>
					</s:url>
					<a href="${listDailyLesson}">
						<s:date name="#timePairs[#timePairName].startDate" format="yyyy-MM-dd" />
						(${timePairName})
					</a>
				</caption>
				<thead>
					<tr>
						<th rowspan="2" width="8%">Teacher</th>
						<th colspan="4" width="46%">Normal</th>
						<th colspan="4" width="46%">Canceled</th>
					</tr>
					<tr>
						<th>Time</th>
						<th>Lesson</th>
						<th>Classroom</th>
						<th>Type</th>
						<th>Time</th>
						<th>Lesson</th>
						<th>Classroom</th>
						<th>Type</th>
					</tr>
				</thead>
				<tbody>
					<s:iterator value="#teachers" var="teacher">
						<s:set name="normalTeachings" value="findByTeacherAndDayNormal(#teacher,#timePairs[#timePairName])" />
						<s:set name="cancelTeachings" value="findByTeacherAndDayCancel(#teacher,#timePairs[#timePairName])" />
						<s:set name="rowsCount" value="#normalTeachings.size > #cancelTeachings.size ? #normalTeachings.size : #cancelTeachings.size" />

						<s:iterator begin="0" end="#rowsCount-1" status="status" var="index">
							<tr>
								<s:if test="#status.first">
									<td rowspan='<s:property value="#rowsCount"/>'><s:url action="listTeacherLesson" namespace="/schedule" id="listTeacherLesson">
											<s:param name="teacherId" value="#teacher.id"></s:param>
											<s:param name="startDate" value="getFormateDay(#startDate)"></s:param>
											<s:param name="endDate" value="getFormateDay(#endDate)"></s:param>
										</s:url> <a href="${listTeacherLesson}"> ${teacher.name}</a>
										<div class="muted">
											共
											<s:property value="countTeachings(#teacher,#timePairs[#timePairName].startDate, #timePairs[#timePairName].endDate)" />
											节课 <br />
											<s:property value="sumTeachings(#teacher,#timePairs[#timePairName].startDate, #timePairs[#timePairName].endDate)" />
											课时
										</div></td>
								</s:if>
								<s:if test="#index < #normalTeachings.size">
									<s:set name="teaching" value="#normalTeachings.get(#index)" />

									<td class="${teaching.lesson.courseType.cssClass}">${teaching.lesson.timespan}</td>
									<td class="${teaching.lesson.courseType.cssClass}" title="${teaching.lesson.title}"><s:url action="viewLesson" namespace="/lesson" id="viewLesson">
											<s:param name="id" value="#teaching.lesson.id"></s:param>
										</s:url> <a href="${viewLesson}" class="dialog" title="查看课程">${teaching.lesson.name}</a> <s:if test="#teaching.lesson.canceled">
											<span class="label">已取消</span>
										</s:if></td>
									<td class="${teaching.lesson.courseType.cssClass}"><s:url namespace="/schedule" action="listClassroomLesson" id="listClassroomLesson">
											<s:param name="classroomId" value="#teaching.lesson.classroom.id"></s:param>
											<s:param name="startDate" value="#startDate"></s:param>
											<s:param name="endDate" value="#endDate"></s:param>
										</s:url> <a href="${listClassroomLesson}">${teaching.lesson.classroom.name} </a></td>
									<td class="${teaching.lesson.courseType.cssClass}"><s:url action="listTypeLesson" namespace="/schedule" id="listTypeLesson">
											<s:param name="courseTypeId" value="#teaching.lesson.courseType.id"></s:param>
											<s:param name="startDate" value="#startDate"></s:param>
											<s:param name="endDate" value="#endDate"></s:param>
										</s:url> <a href="${listTypeLesson }"> ${teaching.lesson.courseType.name} </a></td>
								</s:if>
								<s:else>
									<td colspan="4"></td>
								</s:else>

								<s:if test="#index < #cancelTeachings.size">
									<s:set name="teaching" value="#cancelTeachings.get(#index)" />
									<td class="${teaching.lesson.courseType.cssClass}">${teaching.lesson.timespan}</td>
									<td class="${teaching.lesson.courseType.cssClass}" title="${teaching.lesson.title}"><s:url action="viewLesson" namespace="/lesson" id="viewLesson">
											<s:param name="id" value="#teaching.lesson.id"></s:param>
										</s:url> <a href="${viewLesson}" class="dialog" title="查看课程">${teaching.lesson.name}</a> <s:if test="#teaching.lesson.canceled">
											<span class="label">已取消</span>
										</s:if></td>
									<td class="${teaching.lesson.courseType.cssClass}"><s:url namespace="/schedule" action="listClassroomLesson" id="listClassroomLesson">
											<s:param name="classroomId" value="#teaching.lesson.classroom.id"></s:param>
											<s:param name="startDate" value="#startDate"></s:param>
											<s:param name="endDate" value="#endDate"></s:param>
										</s:url> <a href="${listClassroomLesson}">${teaching.lesson.classroom.name} </a></td>
									<td class="${teaching.lesson.courseType.cssClass}"><s:url action="listTypeLesson" namespace="/schedule" id="listTypeLesson">
											<s:param name="courseTypeId" value="#teaching.lesson.courseType.id"></s:param>
											<s:param name="startDate" value="#startDate"></s:param>
											<s:param name="endDate" value="#endDate"></s:param>
										</s:url> <a href="${listTypeLesson }"> ${teaching.lesson.courseType.name} </a></td>
								</s:if>
								<s:else>
									<td colspan="4"></td>
								</s:else>
							</tr>
						</s:iterator>
					</s:iterator>
				</tbody>
			</table>
		</s:iterator>
	</tiles:putAttribute>
</tiles:insertDefinition>